const id = window.localStorage.getItem("id")
const token = window.localStorage.getItem("token")
const on = document.querySelector(".on")
const off = document.querySelector(".off")
const span = document.querySelector("header>.row>.col-lg-3 span")
if (!id) {
  on.classList.remove('active')
  off.classList.add('active')
}
const xhr = new XMLHttpRequest()
xhr.open("GET", "http://127.0.0.1:8888/users/info?id=" + id)
xhr.onload = () => {
  const res = JSON.parse(xhr.responseText)
  console.log(res)
  if (res.code === 401) {
    on.classList.remove('active')
    off.classList.add('active')
  }
  if (res.code === 1) {
    span.innerText = res.info.nickname
    off.classList.remove('active')
    on.classList.add('active')
  }
}
xhr.setRequestHeader('authorization', token)
xhr.send()

const button = document.querySelector("button")
button.onclick = () => {
  window.localStorage.clear()
  on.classList.remove('active')
  off.classList.add('active')
}

// 标题点击跳转事件
$("header .col-lg-3>li:first>p:first-child").click(function () { window.location.href = "./login.html" })
$("header .col-lg-3>li:first>p:last-child").click(function () { window.location.href = "./register.html" })
$("header .col-lg-3>li:eq(1)>p").click(function () { window.location.href = "./center.html" })
$("header .col-lg-3>li:eq(2)").click(function () { window.location.href = "./cart.html" })
let timer = 0
// nav列表hover事件
$("nav .col-lg-6").on('mouseover', '.item', function (e) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    navl($(e.target).text())
  }, 100)
})
$("nav .col-lg-6").on('mouseout', '.item', function (e) {
  clearTimeout(timer)
})
$("nav .col-lg-6").mouseout(function () {
  $(this).find("div").stop().slideUp(200, "linear")
})
$("nav .col-lg-6").mouseover(function () {
  $(this).find("div").stop().slideDown(200, "linear")
})
async function navl(category) {
  const res = await $.ajax({
    url: "http://localhost:8888/goods/list",
    data: {
      pagesize: 6,
      category
    }
  })
  let str = ''
  res.list.forEach(item => {
    const title = item.title.split(" ")[0]
    str += `
    <li data-id=${item.goods_id}>
      <img src="${item.img_big_logo}">
      <p class="title">${title}</p>
      <span class="current">￥${item.current_price}</span>
    </li>
    `
  })
  // console.log(str)
  $("nav .col-lg-6>div").html(str)
}
// input框hover事件
$("nav .col-lg-3>input").mouseover(function () {
  $(this).css("border-color", "#aaa").next().css("border-color", "#aaa")
})
$("nav .col-lg-3>input").mouseout(function () {
  $(this).css("border-color", "#ccc").next().css("border-color", "#ccc")
})
// input框focus事件
$("nav .col-lg-3>input").focus(function () {
  $(this).css({ "border-color": "#FF6A00" }).next().css({ "border-color": "#FF6A00" })
  $(this).nextAll("ul").css("display", "block")
  $(this).off("mouseover").off("mouseout")
  $(this).next()[0].removeEventListener("mouseover", ninp)
  $(this).next()[0].removeEventListener("mouseout", finp)
  // 聚焦的时候的button按钮hover事件
  $(this).nextAll("button").mouseover(function () {
    $(this).css({ "background-color": "#FF6A00", color: "#fff" })
  })
  $(this).nextAll("button").mouseout(function () {
    $(this).css({ "background-color": "#fff", color: "#aaa" })
  })
})
$("nav .col-lg-3>input").focusout(function () {
  $(this).nextAll("ul").css("display", "none")
  $(this).css({ "border-color": "#ccc" }).next().css({ "border-color": "#ccc" })
  $(this).next().mouseover(function () {
    $(this).css({ "background-color": "#FF6A00", color: "#fff", "border-color": "#FF6A00" })
  })
  $(this).next().mouseout(function () {
    $(this).css({ "background-color": "#fff", color: "#aaa", "border-color": "#ccc" })
  })
  // 重新绑定事件
  $("nav .col-lg-3>button")[0].addEventListener("mouseover", ninp)
  $("nav .col-lg-3>button")[0].addEventListener("mouseout", finp)
  // 失焦的时候的清掉button按钮hover事件
  $(this).nextAll("button").off("mouseover").off("mouseout")
})



$("nav .col-lg-3>input").on("input",function(){
  const text = $("nav .col-lg-3>input")[0].value.trim()
  const script = document.createElement("script")
  script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34443,35104,35237,35049,34584,34518,35234,34579,34606,34815,26350,35145,22159&wd=${text}&req=2&csor=1&cb=fun&_=1637892915435`
  document.body.appendChild(script)
  script.remove()
})
function fun(res) {
  if (!res.g) {
    return
  }
  let str = ""
  for(let i = 0;i<8;i++){
    str += `<li>${res.g[i].q}</li>`
  }
  console.log($("nav>.col-lg-3>ul"))
  $("nav>.row>.col-lg-3>ul").html(str)
}





// button按钮hover事件
$("nav .col-lg-3>button")[0].addEventListener("mouseover", ninp)
$("nav .col-lg-3>button")[0].addEventListener("mouseout", finp)
function ninp() {
  $("nav .col-lg-3>button").prev().css("border-color", "#aaa")
  $("nav .col-lg-3>button").css({ "background-color": "#FF6A00", color: "#fff", "border-color": "#FF6A00" })
}
function finp() {
  $("nav .col-lg-3>button").css({ "background-color": "#fff", color: "#aaa", "border-color": "#ccc" })
  $("nav .col-lg-3>button").prev().css("border-color", "#ccc")
}


// https://api2.order.mi.com/search/query?query=4&page_index=1&jsonpcallback=xmsearch


// section左侧导航
$("section>.row>ul").on("mouseover", ".item", function (e) {
  if (e.target.className === "item") {
    clearTimeout(timer)
    timer = setTimeout(() => {
      navt($(e.target).find("span").text(), this)
    }, 100)
  }
})
$("section>.row>ul").on("mouseout", ".item", function () {
  clearTimeout(timer)
})
$("section>.row>ul").mouseover(function () {
  $(this).find("div").stop().css("display", "flex")
})
$("section>.row>ul").mouseout(function () {
  $(this).find("div").stop().css("display", "none")
})
async function navt(category) {
  const res = await $.ajax({
    url: "http://localhost:8888/goods/list",
    data: {
      pagesize: 24,
      category
    }
  })
  let str = ''
  let count = 0
  res.list.forEach(item => {
    const title = item.title.split(" ")[0]
    count++
    str += `
    <li data-id=${item.goods_id}>
      <img src="${item.img_big_logo}">
      <p class="title">${title}</p>
    </li>
    `
  })
  $("section>.row>ul>div").css("width", Math.ceil(count / 6) * 250).html(str)
}

$("nav>.row>.col-lg-1>.iconfont").click(function(){
	window.location.href="./list.html"
})